之前的鐵人文章都是使用 version AngularJS 1.2.x。

今天來介紹 10/13/2014 release 的 AngularJS 1.3 功能。

1.one-time binding

AngularJS 在 1.3 之前版本只有 two-way binding。
想要使用 one-way binding 功能，我們只能使用 bindonce 等相關外掛套件。
1.3 之後，AngularJS 也開始有原生的 one-time binding。

使用方法很簡單，只要在原本 two-way data binding 寫法前面加上 :: 就好。
該屬性就會變成 static value，不會被 digits cycle 檢查。
範例：http://plnkr.co/edit/dXXf4e1jmzncGMO9seVw?p=preview

<div>名字是：{{::Ctrl.luffy.name}}</div> 

2. 效能進步

1.3 加強了處理 DOM 的速度跟記憶體消耗的處理方式。
( 1.3 的 digest cycle 速度是 1.2.x 的 44% 參考)

3. ngAria

增加 ARIA attribute 的 module，幫助需要輔助科技的訪客閱讀網站內容。
（想了解 ARIA 的朋友可以看 othree 大大的部落格）

4. ngMessages
   幫助我們呈現 Form 錯誤訊息的 directives。
   範例：http://plnkr.co/edit/mI9UW14xVBQAgFtSucqG?p=preview

原先的我們呈現錯誤訊息方式是 檢查 form 的 $error ＋使用 ng-if。

  <form name="yourForm">
    <label for="yourField">名稱1</label>
    <input id="yourField" type="text" ng-model="field1" name="yourField" required minlength="3" />
    <div ng-if="yourForm.yourField.$error">
      <!-- 需指定完整的 model -->
      <div ng-if="yourForm.yourField.$error.required">名稱是必填</div>
      <div ng-if="yourForm.yourField.$error.minlength">長度需要大於3</div>
    </div>
  </form>

變成使用 ngMessages 後，畫面變得乾淨許多。
而且 ngMessages 可讓畫面只會出現一個錯誤。
確保使用者一次只會看到一個錯誤，增加使用者體驗。

  <form name="myForm">
    <label for="myField">名稱</label>
    <input id="myField" type="text" ng-model="field2" name="myField" required minlength="3" />
    <div ng-messages="myForm.myField.$error">
       <!-- 包在 ng-messages 的就是 myForm.myField.$error 的 children -->
      <div ng-message="required">名稱是必填</div>
      <div ng-message="minlength">長度需要大於3</div>
    </div>
  </form>

5. ngModelOptions

可以給 ng-model 更多的額外的參數。

ex: updateOn ，ngModel 會在 options 指定的事件才會更新綁定 model

 <input type="text" name=“userName" ng-model="user.name" ng-model-options="{ updateOn: 'blur' }" />

ex: debounce ，ngModel 會等 1s 才會更新綁定 model

<input type="text" name=“userName" ng-model="user.name"  ng-model-options="{ debounce: 1000 }" />

6. 不支援 IE8

為了加強效能，AngularJS team 宣布 1.3 停止支援 IE8。
假如網站是強力需要支援 IE8 ，還是保持在 1.2 版本吧。
要不然，其實 IE8 只是一些功能不能跑，基本的還是不會影響。
這就要看工程師的取捨了。

更多介紹：
升級指南
AngularJS 1.3 release note

2.0

在最近的 ng-europe 2014，AngularJS 2.0 是個熱門大話題。（note）
AngularJS 2.0 變動事情非常的多，功能也強大了許多。
基本上可以說不是原本的 AngularJS，像是不同媽生的一樣。

主要原因 AngularJS team 想要解決的問題（效能問題占了大多數），不是修修 code 就可以完成的。
要改版，需要把核心整個翻修。
並且還要因應 ECMAscript 6 的寫法進行實做。
（Adventures in Angular 有介紹 2.0 的廣播可以聽）

features 有：
Mobile 上效能期望可以跟原生 APP 媲美
NO jqlite, NO ng-controller, NO $scope 。 ( 參考 Igor Minar & Tobias Bosch 簡報)
Shadow Dom
router 更進化 (2.0 router github)
ECMAscript 6 寫法
等等很多...

因為 2.0 有太多我不熟的技術，現在也還在摸索中就沒有介紹了。
AngularJS 2.0 的 release date 也還沒有明確的日期。
希望可以在那之前把相關技術學習好～ ^^

衍生閱讀：
ng-learn.org AngularJS 2.0 Preview
How I’ve Improved My Angular Apps by Banning ng-controller by Tero Parviainen
Sideshare: SPA for angular 2.0

鐵人 30 天心得：

30 天結束了。

中間遇到了像跑馬拉松一樣，想放棄又不想放棄的心情。
感謝我周邊的朋友一直 push 我，叫我繼續寫下去。
真是萬分感謝，要不然這第 30 天文章應該不會出現吧XD

覺得鐵人賽的大家都很厲害很有恆心，感覺到技術圈大家對技術的熱情～～～～

30 天的寫作讓我更加的瞭解 AngularJS，很多基礎都是回去翻書加以研究才能寫出文章出來。

（使用 名言錦句產生器 製作）

最後希望我學習跟寫文章的熱情還會繼續保持，感謝鐵人賽給我認識學習技術的新方法^^